<template>
  <div class="p_review">
    <div class="container">
      <div class="container_title">
        <span class="iconfont icon-untitled60"></span>
        <span class="title">商品评论管理</span>
      </div>
      <div class="container_content">
        <div class="handle_box">
          <el-form ref="formHandle" :model="formHandle" label-width="80px">
            <el-form-item label="评论时间" style="display: block;">
              <div class="check_box">
                <div class="button_group">
                  <button type='button' :class="reviewTime===item.value?'active':''" v-for="item in reviewTimeList" :key="item.value"
                          @click="checkReviewTime(item.value)">{{item.title}}</button>
                </div>
                <div class="date_picker">
                  <Date-picker
                    :value="reviewTime_pick"
                    format="yyyy/MM/dd"
                    type="daterange"
                    placement="bottom-end"
                    placeholder="选择日期"
                    @on-change="changeTimePick"
                    style="width: 200px"></Date-picker>
                </div>
              </div>
            </el-form-item>
            <div class="check_box">
              <el-form-item label="评论状态">
                <Select v-model="reviewStatus" style="width:200px">
                  <Option value="0">已回复</Option>
                  <Option value="1">未回复</Option>
                </Select>
              </el-form-item>
              <el-form-item label="商品信息">
                <Input v-model="p_info" placeholder="请输入商品ID或商品信息" style="width: 200px"></Input>
              </el-form-item>
              <el-form-item label="用户名称">
                <Input v-model="userName" placeholder="请输入..." style="width: 200px"></Input>
                <Button style="margin-left: 10px" type="primary" icon="ios-search">搜索</Button>
              </el-form-item>
            </div>
            <div class="btn-box">
              <Button type="primary" icon="md-add" @click="orderExport(selectedOrder)">添加虚拟评论</Button>
            </div>
          </el-form>
        </div>
        <div class="review_list">
          <el-table
            :data="reviewList[pageIndex-1]"
            style="width: 100%"
            :row-class-name="clickReview"
            :header-cell-style="getRowClass"
            v-loading="loading"
            size="small">
            <el-table-column
              prop="id"
              label="评论ID"
              width="80">
            </el-table-column>
            <el-table-column
              label="商品信息"
              width="340">
              <template slot-scope="scope">
                <div class="pro_info">
                  <div class="imgList">
                    <viewer :images="scope.row.image">
                      <img v-for="(item,index) in scope.row.image" :key="index" v-show="index===0" :src="item" alt="">
                    </viewer>
                  </div>
                  <div class="info">
                    <p>{{scope.row.store_name}}</p>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="account"
              label="用户名称">
            </el-table-column>
            <el-table-column
              prop="score"
              sortable
              label="评分">
            </el-table-column>
            <el-table-column
              label="评价内容">
              <template slot-scope="scope">
                <div class="review_content">
                  <p>{{scope.row.comment}}</p>
                  <div class="image">
                    <viewer :images="scope.row.pics">
                      <img v-for="(item,index) in scope.row.pics" :key="index" v-show="index===0" :src="item" alt="">
                    </viewer>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="merchant_reply_content"
              label="回复内容">
            </el-table-column>
            <el-table-column
              label="操作"
              width="140">
              <template slot-scope="scope">
                <el-button style="margin-right: 10px" @click="replyReview(scope.row)" type="text" size="small">回复</el-button>
                <el-popconfirm
                  icon="el-icon-info"
                  icon-color="red"
                  title="确定要删除评论吗？删除评论后将无法恢复，请谨慎操作！"
                  @confirm="delReview(scope.row)">
                  <el-button type="text" size="small" slot="reference">删除</el-button>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page">
          <Page :total="total" :page-size="pageSize" @on-change="changePage"></Page>
        </div>
      </div>
    </div>
    <aside>
      <Modal
        v-model="replyModal"
        title="回复内容"
        @on-ok="okReply"
        @on-cancel="cancelReply">
        <Input v-model="replyContent" type="textarea" :rows="4" placeholder="请输入..."></Input>
      </Modal>
    </aside>
  </div>
</template>

<script>
  import reviewList from '../../../apiData/productionReviewList/productionReviewList.js'
  export default {
    name: "p_review",  // 商品评论
    data() {
      return {
        reviewList: [],
        pageIndex: 6,
        loading: false,
        total: 0,
        pageSize: 20,
        replyModal: false,
        formHandle: {
          type: '',
          msg: ''
        },
        reviewTime: 0,
        reviewTimeList: [
          { value: 0, title: '全部' },
          { value: 1, title: '今天' },
          { value: 2, title: '昨天' },
          { value: 3, title: '最近7天' },
          { value: 4, title: '最近30天' },
          { value: 5, title: '本月' },
          { value: 6, title: '本年' }
        ],
        row: {},  // 临时
        reviewTime_pick: [],
        reviewStatus: '',  // 评论状态
        p_info: '',  // 商品信息
        userName: '',  // 用户名称
        replyContent: '',  // 回复内容
      }
    },
    created() {
      this.getData();
    },
    methods: {
      getData() {
        this.total = reviewList.total;
        this.reviewList = reviewList.list;
      },
      checkReviewTime(value) {
        this.reviewTime = value;
        this.reviewTime_pick = [];
      },
      changeTimePick(date) {
        console.log(date);
        this.reviewTime = null;
      },
      //改变table表头背景和字体颜色
      getRowClass ({ row, column, rowIndex, columnIndex }) {
        return 'background:transparent;'
      },
      // 点击评论
      clickReview({row, rowIndex}) {
        if (rowIndex === this.rowIndex) {
          return 'active-row';
        }
        return '';
      },
      // 回复评论
      replyReview(row) {
        this.row = row;
        this.replyModal = true;
      },
      // 删除评论
      delReview() {
        this.$Message.info('删除命令');
      },
      okReply() {
        this.reviewList[this.pageIndex-1].forEach(item => {
          if(item.id === this.row.id) {
            item.merchant_reply_content = this.replyContent
          }
        });
        this.$Message.success('回复成功');
        this.replyContent = '';
      },
      cancelReply() {
        this.replyContent = '';
      },
      // 换页
      changePage(page) {
        this.pageIndex = page
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../style/element.scss";
  .p_review {
    .container_content{
      padding: 20px;
      .handle_box{
        padding-bottom: 10px;
        .check_box{
          display: flex;
          align-items: center;
          .date_picker{
            margin-left: 10px;
          }
        }
      }
      .review_list{
        margin-bottom: 10px;
      }
      .page{
        text-align: right;
      }
    }
  }
  .pro_info{
    display: flex;
    align-items: center;
    .imgList{
      margin-right: 6px;
      img{
        width: 40px;
        height: 40px;
        cursor: pointer;
      }
    }
  }
  .review_content{
    p{
      color: #007DFF;
    }
    .image{
      img{
        width: 70px;
        height: 70px;
        cursor: pointer;
      }
    }
  }
</style>
